<template>
  <v-container>
    <v-row>
      <v-col cols="12" md="8">
        <div class="pt-5">
          <span class="display-1 font-weight-bold">关注列表</span>
        </div>
        <div class="pt-4">
          <v-card class="mt-3" v-for="(creater, i) in createrList" :key="i">
            <v-list-item>
              <v-list-item-avatar
                size="48"
                @click="
                  $router.push(`/creater/${creater.fields.follow_name[0]}`)
                "
                style="cursor:pointer;"
              >
                <v-img
                  class="elevation-6"
                  :src="creater.fields.follow_name[1]"
                ></v-img>
              </v-list-item-avatar>
              <v-list-item-content>
                <v-list-item-title class="subtitle-1 font-weight-bold">{{
                  creater.fields.follow_name[0]
                }}</v-list-item-title>
              </v-list-item-content>
              <v-btn v-if="!check" color="primary" @click="follow"
                >+ 关注</v-btn
              >
              <v-btn
                v-if="check"
                color="info"
                @click="cancel(creater.fields.follow_name[0])"
                >已关注</v-btn
              >
            </v-list-item>
          </v-card>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      check: true,
      createrList: []
    };
  },
  created() {
    this.fetchFollow();
  },
  methods: {
    async fetchFollow() {
      try {
        const res = await this.$http.get(
          `follow_list/?name=${localStorage.getItem("name")}`
        );
        this.createrList = res.data.list;
        this.createrList.forEach(creater => {
          creater.fields.follow_name[1] = require(creater.fields
            .follow_name[1]);
        });
      } catch (e) {
        console.log("图片获取失败");
      }
    },
    async cancel(follow_name) {
      let name = localStorage.getItem("name");
      const confirm = await this.$dialog.warning({
        text: `确认是否取关${follow_name}?`,
        icon: "fa-exclamation-triangle",
        title: "取消关注"
      });
      if (confirm) {
        const res = await this.$http.get(
          `cancel_follow/?name=${name}&follow_name=${follow_name}`
        );
        if (res.data.error_num === 0) {
          this.$toast({
            text: "取关成功",
            type: "success",
            duration: 3000
          });
          this.fetchFollow();
        }
      }
    }
  }
};
</script>

<style></style>
